<template>
  <div class="page-sku-table">
    <el-form-item
      :label="$t('product.priceAndInventory')"
      :label-width="$t('language') === 'English' ? '132px' : '100px'"
    >
      <div class="sku-table-con">
        <!--批量设置-->
        <div
          v-if="lists.length > 1"
          class="batch-settings-box"
        >
          <div class="set-txt">
            <span>{{
              $t("groups.batchSettings")
            }}</span>
            <span class="weak-txt">{{ $t("product.postProductTips14") }}</span>
          </div>
          <div
            class="batch-settings-tb"
          >
            <!-- native modifier has been removed, please confirm whether the function has been affected  -->
            <el-form
              :inline="true"
              class="demo-form-inline"
              @submit.prevent
            >
              <div class="batch-settings-con">
                <div
                  v-for="(item, i) in batchList"
                  :key="i"
                  class="item"
                >
                  <el-select
                    v-model="item.value"
                    class="bat-set-item"
                    placeholder="请选择"
                    @change="changeValue"
                  >
                    <el-option
                      :key="-1"
                      label="全部"
                      :value="-1"
                    />
                    <el-option
                      v-for="(el,index) in item.tagItems"
                      :key="index"
                      :label="el.propValue"
                      :value="el.propValue"
                    />
                  </el-select>
                </div>

                <div class="item">
                  <input
                    v-model.number="dataFrom.price"
                    :placeholder="$t('product.sellingPrice')"
                    type="number"
                    :max="100000000"
                    :min="0.01"
                    :step="0.01"
                    class="tag-input-width"
                    @blur="
                      handleInputValue(
                        dataFrom.price,
                        null,
                        'price',
                        0.01,
                        100000000
                      )
                    "
                  >
                </div>
                <div class="item">
                  <input
                    v-model.number="dataFrom.stocks"
                    :placeholder="$t('coupon.stock')"
                    type="number"
                    :disabled="isCompose == 1"
                    :max="9999999"
                    :min="0"
                    :step="1"
                    class="tag-input-width"
                    @keyup="
                      dataFrom.stocks = String(dataFrom.stocks).match(
                        /[^0-9]{1,7}/
                      )
                        ? 0
                        : dataFrom.stocks
                    "
                    @blur="
                      handleInputValue(
                        dataFrom.stocks,
                        null,
                        'stocks',
                        0,
                        9999999
                      )
                    "
                  >
                </div>
                <div class="item">
                  <input
                    v-model.number="dataFrom.oriPrice"
                    :placeholder="$t('product.marketPrice')"
                    type="number"
                    :max="100000000"
                    :min="0"
                    :step="0.01"
                    class="tag-input-width"
                    @blur="
                      handleInputValue(
                        dataFrom.oriPrice,
                        null,
                        'oriPrice',
                        0,
                        100000000
                      )
                    "
                  >
                </div>
                <div
                  v-if="mold === 0"
                  class="item"
                >
                  <input
                    v-model.number="dataFrom.volume"
                    :placeholder="$t('product.commodityVolume')"
                    type="number"
                    :max="100000000"
                    :min="0"
                    :step="0.01"
                    class="tag-input-width"
                    @blur="
                      handleInputValue(
                        dataFrom.volume,
                        null,
                        'volume',
                        0,
                        100000000
                      )
                    "
                  >
                </div>
                <div
                  v-if="mold === 0"
                  class="item"
                >
                  <input
                    v-model.number="dataFrom.weight"
                    :placeholder="$t('product.commodityWeight')"
                    type="number"
                    :max="100000000"
                    :min="0"
                    :step="0.01"
                    class="tag-input-width"
                    @blur="
                      handleInputValue(
                        dataFrom.weight,
                        null,
                        'weight',
                        0,
                        100000000
                      )
                    "
                  >
                </div>
                <div class="item">
                  <input
                    v-model.number="dataFrom.stockWarning"
                    :placeholder="$t('product.stockWarning')"
                    type="number"
                    :max="9999999"
                    :min="0"
                    :step="1"
                    class="tag-input-width"
                    @keyup="
                      dataFrom.stockWarning = String(dataFrom.stockWarning).match(
                        /[^0-9]{1,7}/
                      )
                        ? 0
                        : dataFrom.stockWarning
                    "
                    @blur="
                      handleInputValue(
                        dataFrom.stockWarning,
                        null,
                        'stockWarning',
                        0,
                        9999999
                      )
                    "
                  >
                </div>
                <div class="item" />
                <div class="btn-row">
                  <div
                    class="default-btn primary-btn"
                    @click="batchSet"
                  >
                    {{ $t("order.save") }}{{ $t("publics.batchSetting") }}
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <!--sku列表-->
        <div class="table-con">
          <el-table
            :data="lists"
            header-cell-class-name="table-header"
            :span-method="tableSpanMethod"
            row-class-name="table-row"
            border
          >
            <el-table-column
              v-for="(leftTitle, index) in tableLeftTitles"
              :key="index"
              :label="
                $t('language') === 'English'
                  ? leftTitle.tagNameEn
                  : leftTitle.tagName
              "
            >
              <template #default="scope">
                <div v-if="scope.row.propertiesEn && scope.row.properties">
                  {{
                    $t("language") === "English"
                      ? scope.row.propertiesEn.split(";")[index].substring(scope.row.propertiesEn.split(";")[index].indexOf(':') + 1)
                      : scope.row.properties.split(";")[index].substring(scope.row.properties.split(";")[index].indexOf(':') + 1)
                  }}
                </div>
              </template>
            </el-table-column>
            <!-- 售价 -->
            <el-table-column
              prop="price"
              :label="$t('product.sellingPrice')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.price"
                  type="number"
                  :precision="2"
                  :max="100000000"
                  :min="0.01"
                  :step="0.01"
                  :disabled="!scope.row.status || scope.row.isParticipate === 1"
                  class="tag-input-width"
                  @blur="
                    handleInputValue(
                      scope.row.price,
                      scope.$index,
                      'price',
                      0.01,
                      100000000
                    )
                  "
                >
              </template>
            </el-table-column>
            <!-- 库存 -->
            <el-table-column
              prop="stocks"
              :label="$t('coupon.stock')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.stocks"
                  type="number"
                  :max="9999999"
                  :min="0"
                  :step="1"
                  :disabled="!scope.row.status || isCompose == 1"
                  class="tag-input-width"
                  @keyup="
                    scope.row.stocks = String(scope.row.stocks).match(/[^0-9]/)
                      ? ''
                      : scope.row.stocks
                  "
                  @blur="
                    handleInputValue(
                      scope.row.stocks,
                      scope.$index,
                      'stocks',
                      0,
                      9999999
                    )
                  "
                >
              </template>
            </el-table-column>
            <!-- 市场价 -->
            <el-table-column
              prop="oriPrice"
              :label="$t('product.marketPrice')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.oriPrice"
                  type="number"
                  :precision="2"
                  :max="100000000"
                  :min="0"
                  :step="0.01"
                  :disabled="!scope.row.status"
                  class="tag-input-width"
                  @blur="
                    handleInputValue(
                      scope.row.oriPrice,
                      scope.$index,
                      'oriPrice',
                      0,
                      100000000
                    )
                  "
                >
              </template>
            </el-table-column>
            <!-- 体积 -->
            <el-table-column
              v-if="mold === 0"
              prop="volume"
              :label="$t('product.commodityVolume')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.volume"
                  type="number"
                  :max="100000000"
                  :min="0"
                  :step="0.01"
                  :disabled="!scope.row.status"
                  class="tag-input-width"
                  @blur="
                    handleInputValue(
                      scope.row.volume,
                      scope.$index,
                      'volume',
                      0,
                      100000000
                    )
                  "
                >
              </template>
            </el-table-column>
            <!-- 重量 -->
            <el-table-column
              v-if="mold === 0"
              prop="weight"
              :label="$t('product.commodityWeight')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.weight"
                  type="number"
                  :max="100000000"
                  :min="0"
                  :step="0.01"
                  :disabled="!scope.row.status"
                  class="tag-input-width"
                  @blur="
                    handleInputValue(
                      scope.row.weight,
                      scope.$index,
                      'weight',
                      0,
                      100000000
                    )
                  "
                >
              </template>
            </el-table-column>

            <!-- 库存预警 -->
            <el-table-column
              prop="stockWarning"
              :label="$t('product.stockWarning')"
            >
              <template #default="scope">
                <input
                  v-model.number="scope.row.stockWarning"
                  type="number"
                  :max="9999999"
                  :min="0"
                  :step="1"
                  :disabled="!scope.row.status"
                  class="tag-input-width"
                  @keyup="
                    scope.row.stockWarning = String(scope.row.stockWarning).match(/[^0-9]/)
                      ? ''
                      : scope.row.stockWarning
                  "
                  @blur="
                    handleInputValue(
                      scope.row.stockWarning,
                      scope.$index,
                      'stockWarning',
                      0,
                      9999999
                    )
                  "
                >
              </template>
            </el-table-column>

            <!-- 编码 -->
            <el-table-column
              prop="partyCode"
              :label="$t('product.commodityCode')"
              width="220px"
            >
              <template #default="scope">
                <input
                  ref="partyCodeIntRef"
                  v-model="scope.row.partyCode"
                  type="text"
                  maxlength="36"
                  :disabled="!scope.row.status"
                  class="tag-input-width text-input party-code"
                  :placeholder="$t('product.postProductTips15')"
                  @blur="validatePartyCode(scope)"
                >
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              :label="$t('text.menu')"
              align="center"
            >
              <template #default="scope">
                <div
                  v-if="scope.row.status"
                  class="default-btn text-btn"
                  @click="changeSkuStatus(`${scope.$index}`)"
                >
                  {{ $t("publics.disable") }}
                </div>
                <div
                  v-else
                  class="default-btn text-btn"
                  @click="changeSkuStatus(`${scope.$index}`)"
                >
                  {{ $t("shop.ena") }}
                </div>
                <div
                  v-if="isCompose == 1"
                  class="default-btn text-btn"
                  @click="relationSkuRetailProd(scope.row, scope.$index)"
                >
                  {{ $t("product.relatedItems") }}({{
                    scope.row.skuSingleProds
                      ? scope.row.skuSingleProds.length || 0
                      : 0
                  }})
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form-item>
    <!-- 弹窗, 关联单品的弹窗 -->
    <sku-single-prod
      v-if="relationVisible"
      ref="skuSingleProdRef"
      @refresh-select-single-prods="selectSingleProds"
    />
  </div>
</template>

<script setup>
import { validNoEmptySpace } from '@/utils/validate'
import { getCurrentInstance, computed, ref, watch, onMounted } from 'vue'
import SkuSingleProd from '@/components/sku-single-prod/index.vue'
import { flatten as genFlatten } from '@/utils'
import { ElMessage } from 'element-plus'
import Big from 'big.js'
import { scoreProdStore } from '@/stores/prod.js'
import $t from '@/utils/$t.js'
const emit = defineEmits(['update:modelValue'])

const dataFrom = ref({
  oriPrice: null,
  price: null,
  stocks: null,
  weight: null,
  volume: null,
  stockWarning: null,
  prodNameCn: null,
  prodNameEn: null
})

const props = defineProps({
  modelValue: {
    default: () => [],
    type: Array
  },
  prodNameCn: {
    type: [Number, String],
    default: ''
  },
  prodNameEn: {
    type: [Number, String],
    default: ''
  },
  isCompose: {
    default: 0,
    type: [Number, String]
  },
  mold: {
    default: 0,
    type: Number
  }
})
const lists = ref([{
  oriPrice: 0.01,
  partyCode: '',
  price: 0.01,
  prodName: '',
  prodNameCn: '',
  prodNameEn: '',
  status: 1,
  stocks: 0,
  volume: 0,
  weight: 0,
  stockWarning: 0,
  isCompose: props.isCompose
}])

const prodStore = scoreProdStore()
const skuTags = computed({
  get () {
    return prodStore.skuTags.filter((item) => {
      return !!(
        item.tagItems &&
          item.tagItems.length &&
          !item.tagItems[0].creating
      )
    })
  }
})
const batchList = ref([])
const tableLeftTitles = computed(() => {
  return getTableLeftTitles(skuTags.value)
})
const getTableLeftTitles = (skuTags) => {
  const arr = []
  skuTags?.forEach((el, i) => {
    arr[i] = { ...(batchList.value[i] || {}), ...el }
  })
  batchList.value = arr

  batchList.value.forEach(el => {
    if (!el.value) {
      el.value = -1
    }
  })
  return skuTags
}
const defalutSku = computed(() => {
  return prodStore.defalutSku
})

const skuAddProdName = () => {
  if (initing) {
    return
  }
  const skuList = []
  emit('update:modelValue', lists.value)
  for (let i = 0; i < lists.value.length; i++) {
    const sku = lists.value[i]
    if (!sku.properties || !sku.propertiesEn) {
      return
    }
    sku.skuName = ''
    sku.skuNameEn = ''
    const properties = sku.properties.split(';')
    const propertiesEn = sku.propertiesEn.split(';')
    for (const propertiesKey in properties) {
      sku.skuName += properties[propertiesKey].substring(properties[propertiesKey].indexOf(':') + 1) + ' '
    }
    for (const propertiesKey in propertiesEn) {
      sku.skuNameEn += propertiesEn[propertiesKey].substring(propertiesEn[propertiesKey].indexOf(':') + 1) + ' '
    }
    sku.prodNameCn = props.prodNameCn + ' ' + sku.skuName
    sku.prodName = props.prodNameCn + ' ' + sku.skuName
    sku.prodNameEn = props.prodNameEn + ' ' + sku.skuNameEn
    skuList.push(sku)
  }
}
// eslint-disable-next-line no-unused-vars
const checkIsEqualByIndex = (str1, str2, index, splitStr = ':') => {
  const strArr1 = str1.split(';')
  const strArr2 = str2.split(';')
  const temp1 = [strArr1[index].slice(0, strArr1[index].indexOf(':')), strArr1[index].substring(strArr1[index].indexOf(':') + 1)]
  const temp2 = [strArr2[index].slice(0, strArr2[index].indexOf(':')), strArr2[index].substring(strArr2[index].indexOf(':') + 1)]
  return temp1[1] === temp2[1]
}

const rowspan = ref([])
const computeRowspan = () => {
  rowspan.value = []
  const isRowspan = (index) => {
    const span = []
    let dot = 0
    lists.value.forEach((item, idx) => {
      if (idx === 0) {
        span.push(1)
      } else {
        if (
          checkIsEqualByIndex(
            item.properties,
            lists.value[idx - 1].properties,
            index
          )
        ) {
          span[dot] += 1
          span.push(0)
        } else {
          dot = idx
          span.push(1)
        }
      }
    })

    rowspan.value.push(span)
  }
  // eslint-disable-next-line no-unused-vars
  skuTags.value.forEach((item, index) => {
    isRowspan(index)
  })
}

let initing = false
watch(skuTags, () => {
  lists.value = genFlatten(skuTags.value, lists.value, defalutSku.value)
  initing = false
  skuAddProdName()
  computeRowspan()
}, { deep: true, immediate: true })

watch([() => props.prodNameCn, () => props.prodNameEn], () => {
  skuAddProdName()
})
const isEdit = ref(false)

const onGetdbSpecs = () => {
  isEdit.value = false
  if (!lists.value.length) {
    lists.value.push({
      oriPrice: 0.01,
      partyCode: '',
      price: 0.01,
      prodName: '',
      prodNameCn: '',
      prodNameEn: '',
      status: 1,
      stocks: 0,
      volume: 0,
      weight: 0,
      stockWarning: 0,
      isCompose: props.isCompose
    })
  }
}

onMounted(() => {
  onGetdbSpecs()
})

const init = (skuList) => {
  initing = true
  lists.value = genFlatten(skuTags.value, skuList, defalutSku.value)
  computeRowspan()
}
const changeSkuStatus = (tagIndex) => {
  onGetdbSpecs()

  lists.value[tagIndex].status = lists.value[tagIndex].status ? 0 : 1
  emit('update:modelValue', lists.value)
}

// eslint-disable-next-line no-unused-vars
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  for (let i = 0; i < skuTags.value.length; i++) {
    if (columnIndex === i) {
      if (rowspan.value[i] && rowspan.value[i][rowIndex]) {
        return {
          rowspan: rowspan.value[i][rowIndex],
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
}
const relationVisible = ref(false)
const skuSingleProdRef = ref(null)
const relationSkuRetailProd = (row, index) => {
  relationVisible.value = true
  nextTick(() => {
    skuSingleProdRef.value?.init(row, index)
  })
}
const selectSingleProds = (data, index) => {
  const skuSingleProds = JSON.parse(JSON.stringify(data.skuSingleProds))
  lists.value[index].stocks = countSkuStock(skuSingleProds)
  const price = countSkuPrice(skuSingleProds)
  lists.value[index].price = price === 0 ? 0.01 : price
  lists.value[index].oriPrice = price
  lists.value[index].skuSingleProds = skuSingleProds
  emit('update:modelValue', lists.value)
}
const countSkuStock = (skuSingleProds) => {
  let stock = 0
  if (!skuSingleProds) {
    return stock
  }
  if (!skuSingleProds.length) {
    return stock
  }
  const arr = []
  skuSingleProds.forEach((element) => {
    const x = new Big(element.stocks)
    const y = new Big(element.retailNums)
    let result = 0
    if (y > 0) {
      result = parseInt(x.div(y))
    }
    arr.push(result)
  })
  if (!arr || arr.length === 0) {
    stock = 0
  }
  stock = Math.min.apply(null, arr)
  return stock
}
// 计算sku所有单品的总价格
const countSkuPrice = (skuSingleProds) => {
  let price = 0
  if (!skuSingleProds) {
    return price
  }
  if (!skuSingleProds.length) {
    return price
  }
  skuSingleProds.forEach((element) => {
    const x = new Big(element.total)
    const y = new Big(price)
    price = parseFloat(y.plus(x))
  })
  return price === 0 ? 0.01 : price.toFixed(2)
}

const { ctx } = getCurrentInstance()
const changeValue = () => {
  ctx.$forceUpdate()
  // 刷新
}
const batchSet = () => {
  lists.value.forEach((sku) => {
    let isBatch = true
    if (sku.properties) {
      sku.properties.split(';').forEach((el, index) => {
        // -1为全部
        if (batchList.value[index].value !== -1 && el !== batchList.value[index].tagName + ':' + batchList.value[index].value) {
          isBatch = false
        }
      })
    }
    if (isBatch) {
      if (dataFrom.value.oriPrice || dataFrom.value.oriPrice === 0) {
        sku.oriPrice = dataFrom.value.oriPrice
      }
      if (dataFrom.value.price) {
        sku.price = dataFrom.value.price
      }
      if (
        (dataFrom.value.stocks || dataFrom.value.stocks === 0) &&
       props.isCompose != 1
      ) {
        sku.stocks = dataFrom.value.stocks
        initing = false
      }
      if (dataFrom.value.weight || dataFrom.value.weight === 0) {
        sku.weight = dataFrom.value.weight
      }
      if (dataFrom.value.volume || dataFrom.value.volume === 0) {
        sku.volume = dataFrom.value.volume
      }
      if (dataFrom.value.stockWarning || dataFrom.value.stockWarning === 0) {
        sku.stockWarning = dataFrom.value.stockWarning
      }
    }
  })
  skuAddProdName()
}

/**
 * 处理输入框数据
 * @param data
 * @param index
 * @param dataFields
 * @param min 最小值
 * @param max 最大值
 */
const handleInputValue = (data, index, dataFields, min, max) => {
  if (index !== undefined && index !== null) {
    // 表格
    if (+data > max) {
      lists.value[index][dataFields] = max
      if (dataFields === 'stocks') {
        emit('update:modelValue', lists.value)
      }
      return
    }
    if (+data <= min || !data) {
      lists.value[index][dataFields] = min
      if (dataFields === 'stocks') {
        emit('update:modelValue', lists.value)
      }
      return
    }
    if (
      dataFields === 'price' ||
      dataFields === 'oriPrice' ||
      dataFields === 'volume' ||
      dataFields === 'weight' ||
      dataFields === 'stockWarning'
    ) {
      lists.value[index][dataFields] = checkInput(data)
    } else if (dataFields === 'skuScore') {
      lists.value[index][dataFields] = checkInputInt(data)
    }
  } else {
    // 批量
    if (data === null || data === '') {
      return
    }
    if (+data > max) {
      dataFrom.value[dataFields] = max
      return
    }
    if (+data <= min) {
      dataFrom.value[dataFields] = min
      return
    }
    if (
      dataFields === 'price' ||
      dataFields === 'oriPrice' ||
      dataFields === 'volume' ||
      dataFields === 'weight' ||
      dataFields === 'stockWarning'
    ) {
      dataFrom.value[dataFields] = checkInput(data)
    } else if (dataFields === 'skuScore') {
      dataFrom.value[dataFields] = checkInputInt(data)
    }
  }
  if (dataFields === 'stocks') {
    emit('update:modelValue', lists.value)
  }
}

/**
 * 只允许输入正数和小数(保留小数点后两位)
 */
const checkInput = (num) => {
  if (num) {
    let tmpVal = String(num).replace(/[^\d^\\.]/g, '')
    const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
    if (!reg.test(tmpVal)) {
      tmpVal = tmpVal + ''
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
      const n = tmpVal.split('.').length - 1
      if (n > 1) {
        tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
      }
    }
    return tmpVal
  } else {
    return ''
  }
}

const checkInputInt = (num) => {
  if (num) {
    let tmpVal = String(num).replace(/[^\d^\\.]/g, '')
    // 仅允许输入正整数
    const reg = /^(0|([1-9]\d*))$/
    if (!reg.test(tmpVal)) {
      tmpVal = tmpVal + ''
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
    }
    return tmpVal
  } else {
    return ''
  }
}

/**
 * 编码输入框校验
 */
const validatePartyCode = (scope) => {
  const { row, $index } = scope
  // 纯空格校验
  if (validNoEmptySpace(row.partyCode)) {
    lists.value[$index].partyCode = ''
    return
  }
  // 商品编码重复校验
  check(row, $index)
}

const check = (row, $index) => {
  if (
    row.partyCode &&
    lists.value.find(
      (el, index) =>
        el.partyCode && index !== $index && el.partyCode === row.partyCode
    )
  ) {
    ElMessage({
      message: $t('product.postProductTips16'),
      type: 'error',
      duration: 1500
    })
  }
}
defineExpose({ init })
</script>

<style lang="scss" scoped>
.page-sku-table {
   :deep(.pic-uploader-component .el-upload)  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .pic-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
  }
  :deep(.pic-uploader-component .el-upload:hover)  {
    border-color: #409eff;
  }

  :deep(.table-row){
    width: 160px;
  }
  .tag-input-width.party-code::placeholder {
    color: #999;
  }

  // 表格输入框
  .tag-input-width {
    width: 100%;
    padding-left: 5px;
    padding-right: 0;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    &:focus {
      outline: 0;
    }
  }
  .tag-input-width.text-input {
    padding-right: 5px;
  }
  // 表格+批量设置
  .sku-table-con {
    width: 100%;
    display: block;
    padding: 10px;
    border: 1px solid #dcdcdc;

    // 批量设置
    .batch-settings-box {
      width: 100%;
      .set-txt {
        padding-top: 10px;
        .weak-txt {
          color: #999;
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .batch-settings-tb {
        margin: 10px 0;
        // 头部

        .batch-settings-con {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 0;
          .item {
            flex: 1;
            padding: 0 10px;
            & :deep(.el-form-item),
            & :deep(.el-form-item__content) {
              width: 100%;
              margin-right: 0;
            }
          }
          .btn-row{
            width: 220px;
            text-align: right;
          }
        }
      }
    }
  }
  div :deep(.el-table tbody tr:hover > td) {
    background-color: #ffffff;
  }

  :deep(.item .el-input--suffix .el-input__inner){
      width: 100%;
  }
}

</style>
